vue的数据绑定有哪些方式(vue面试题双向数据绑定原理)

1.vue双向数据绑定原理

vue.js采用的是数据劫持结合发布者-订阅者模式的方式.利用Object.defineProperty来劫持对象,利用getter,setter在数据变动时发布消息给订阅者,触发相对应的监听回调，更新视图.

2.实现数据绑定的方法大致有几种

1.发布者-订阅者模式 :一般通过sub、pub的方式实现数据和视图的绑定监听,更新数据的方式通常做法是vm.set('property',value)。我们更希望通过vm.prototype=value这种方式更新视图数据,同时自动跟新视图.

2.脏值检查 :angular.js是通过脏值检测的方式对比数据是否有变更，来决定视图是否更新，最简单的方式就是通过setInterval(),定时轮询检测数据变动,应为setInterval太耗费性能,所以angular只有在指定的事件触发时进入脏值检查,大致如下:

1.DOM事件，譬如用户输入文本，点击按钮等.(ng-click)

2.XHR响应事件($http)

3.浏览器Location变更事件($location)

4.Timer事件($timeout,$interval)

5.执行$digest()或$apply()

3.数据劫持: vue.js则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者,触发相应的监听回调.

3.vue双向数据绑定(具体流程)

实现过程

首先对数据进行劫持与监听,需要设置一个监听器Observer，用来监听所有的属性.如果属性发生了变化,会通知消息订阅器Dep(收集订阅者),Dep通知订阅者Watcher看是否需要更新.然后在监听Observer和订阅者Watcher之间统一管理,触发视图更新.同时创建一个指令解析器Compile，根据new Vue实例传入的el绑定的元素，对它的子元素进行扫描与解析，对相关指令对应初始化一个订阅者watcher存放在订阅器中(Dep)，并替换模板数据或者绑定相对应的函数,如果当订阅者watcher接收到相对应属性的变化，就会执行相对应的更新函数,从而更新视图.

1.实现一个监听器Observer，用来劫持并监听所有的属性，如果有变动就通知订阅者.

2.实现一个订阅者Watcher,收到属性的变化通知并执行相对应的函数，从而更新视图.

3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令，并初始化模板数据以及初始化相对应的订阅器.

下节Compile的简单实现：